<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>剑阵</title>
	<style>
	        *{margin:0;padding:0;}
	        body{
	        transform-style:preserve-3d;
		   	perspective:1000px;
		  	perspective-origin:50% 50%;
	        }
		   .box{
		   	width:150px;
		   	height:200px;
		   	border:1px #fff solid;
		   	margin:200px auto;
		   	position:relative;
		   	transform-style:preserve-3d;
		  	animation:jianzhen_ani 5s linear infinite;
		   }
		   .box>div{
		   	width:150px;
		   	height:200px;
		   	text-align:center;
		   	line-height:200px;
		   	color:#fff;
		   	position:absolute;
		   	background:rgba(255,255,255,0.3);

		   }
		   .d1{
		   	transform:rotateY(0deg)
		  	translateZ(300px);
		   }
		   	.d2{
		   	transform:rotateY(30deg)
		  	translateZ(300px);
		   }
		    .d3{
		   	transform:rotateY(60deg)
		  	translateZ(300px);
		   }
		    .d4{
		   	transform:rotateY(90deg)
		  	translateZ(300px);
		   }
		    .d5{
		   	transform:rotateY(120deg)
		  	translateZ(300px);
		   }
		    .d6{
		   	transform:rotateY(150deg)
		  	translateZ(300px);
		   }
		   	.d7{
		   	transform:rotateY(180deg)
		  	translateZ(300px);
		   }
		   	.d8{
		   	transform:rotateY(210deg)
		  	translateZ(300px);
		   }
		   	.d9{
		   	transform:rotateY(240deg)
		  	translateZ(300px);
		   }
		   	.d10{
		   	transform:rotateY(270deg)
		  	translateZ(300px);
		   }
		   	.d11{
		   	transform:rotateY(300deg)
		  	translateZ(300px);
		   }
		   	.d12{
		   	transform:rotateY(330deg)
		  	translateZ(300px);
		   }
		   @keyframes jianzhen_ani{
			0%{transform:rotateY(0);}
			100%{transform:rotateY(360deg);}
		  }

	</style>
</head>
<body>  
	  	<div class="box">
	  		<div class="d1"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d2"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d3"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d4"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d5"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d6"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d7"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d8"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d9"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d10"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d11"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	  		<div class="d12"><img src="./images/jianzhen11.jpg" width="50"height="350"></div>
	    </div>

</body>
</html>